<template>
  <div class="Hyjjtop">
    <div class="samlldiv" v-if="loading">
      <div style="height: 24%; position: relative; margin-bottom: 1.3%">
        <div class="viptopleft">
          <div>
            <p class="fontstyle" id="hysqjrysje">
              {{ vipmesnumber.todayReceived || 0 }}
            </p>
            <div class="vipgridhr"></div>
            <p>今日已收金额(万元)</p>
          </div>
          <div>
            <p class="fontstyle" id="hysqljysje">
              {{ vipmesnumber.totalReceived || 0 }}
            </p>
            <div class="vipgridhr"></div>
            <p>
              累计已收金额<span id="hyjjljysje">({{ unitleiji }})</span>
            </p>
          </div>
        </div>
        <div class="viptopright">
          <div>
            <p class="fontstyle" id="hysqhyzj">
              {{ vipmesnumber.vipTotal || 0 }}
            </p>
            <div
              class="vipgridhrright"
              style="height: 0.05rem; background-color: #182c56"
            ></div>
            <p>会员总计(家)</p>
          </div>
          <div>
            <p class="fontstyle" id="hysqjjdq">
              {{ vipmesnumber.dueSoon || 0 }}
            </p>
            <div
              class="vipgridhrright"
              style="height: 0.05rem; background-color: #182c56"
            ></div>
            <p>即将到期(家)</p>
          </div>
          <div>
            <p class="fontstyle" id="hysqbnxfhy">
              {{ vipmesnumber.yearVip || 0 }}
            </p>
            <div
              class="vipgridhrright"
              style="height: 0.05rem; background-color: #182c56"
            ></div>
            <p>本年续费会员(家)</p>
          </div>
        </div>
      </div>
      <div class="vipmiddlearea">
        <div style="width: 100%; height: 100%">
          <table
            v-if="serveExpensearr.todayReceived"
            id="vipareaserve"
            style="border-collapse: collapse; width: 100%; height: 100%"
          >
            <thead style="height: 70px">
              <tr class="vipareaservefirst">
                <th rowspan="2" id="lineTd">服务费</th>
                <th colspan="2" title="不收取平台服务费">
                  20万元以下<span style="font-size: 14px">(万元)</span>
                </th>
                <th colspan="2" title="中标金额的万分之八">
                  20-100万元<span style="font-size: 14px">(万元)</span>
                </th>
                <th colspan="2" title="中标金额的千分之一点六">
                  100-500万元<span style="font-size: 14px">(万元)</span>
                </th>
                <th colspan="2" title="中标金额的千分之二">
                  500万元以上<span style="font-size: 14px">(万元)</span>
                </th>
                <th colspan="2">合计</th>
              </tr>
              <tr class="vipareaservesecond" style="">
                <th>笔数</th>
                <th>金额<span style="font-size: 12px">(万元)</span></th>
                <th>笔数</th>
                <th>金额<span style="font-size: 12px">(万元)</span></th>
                <th>笔数</th>
                <th>金额<span style="font-size: 12px">(万元)</span></th>
                <th>笔数</th>
                <th>金额<span style="font-size: 12px">(万元)</span></th>
                <th>笔数</th>
                <th>金额<span style="font-size: 12px">(万元)</span></th>
              </tr>
            </thead>
            <tr
              class="normaltr"
              v-for="(item, index) in severtabledata"
              :key="index"
            >
              <th v-if="index == 0" style="color: black">本日</th>
              <th v-if="index == 1" style="color: black">月度</th>
              <th v-if="index == 2" style="color: black">年度</th>
              <th v-if="index == 3" style="color: black">累计</th>
              <th class="hyjjtabletext">
                <span v-if="index == 0">
                  {{ serveExpensearr.todayReceived.twentyWY.num || 0 }}</span
                >
                <span v-if="index == 1">
                  {{ serveExpensearr.month.twentyWY.num || 0 }}</span
                >
                <span v-if="index == 2">
                  {{ serveExpensearr.year.twentyWY.num || 0 }}</span
                >
                <span v-if="index == 3">
                  {{ serveExpensearr.total.twentyWY.num || 0 }}</span
                >
              </th>
              <th>
                <span v-if="index == 0">
                  <!-- {{serveExpensearr.todayReceived.twentyWY.amount.toFixed(2) || 0}} -->
                  {{
                    returnFloat(serveExpensearr.todayReceived.twentyWY.amount)
                  }}
                </span>
                <span v-if="index == 1">
                  <!-- {{
                    serveExpensearr.month.twentyWY.amount.toFixed(2) || 0
                  }} -->
                  {{ returnFloat(serveExpensearr.month.twentyWY.amount) }}
                </span>
                <span v-if="index == 2">
                  <!-- {{
                    serveExpensearr.year.twentyWY.amount.toFixed(2) || 0
                  }} -->
                  {{ returnFloat(serveExpensearr.year.twentyWY.amount) }}
                </span>
                <span v-if="index == 3">
                  <!-- {{
                    serveExpensearr.total.twentyWY.amount.toFixed(2) || 0
                  }} -->
                  {{ returnFloat(serveExpensearr.total.twentyWY.amount) }}
                </span>
              </th>

              <th class="hyjjtabletext">
                <span v-if="index == 0">{{
                  serveExpensearr.todayReceived.twentyAndOneHundredWY.num || 0
                }}</span>
                <span v-if="index == 1">
                  {{
                    serveExpensearr.month.twentyAndOneHundredWY.num || 0
                  }}</span
                >
                <span v-if="index == 2">
                  {{
                    serveExpensearr.year.twentyAndOneHundredWY.num || 0
                  }}</span
                >
                <span v-if="index == 3">
                  {{
                    serveExpensearr.total.twentyAndOneHundredWY.num || 0
                  }}</span
                >
              </th>
              <th>
                <span v-if="index == 0">
                  <!-- {{
                  serveExpensearr.todayReceived.twentyAndOneHundredWY.amount.toFixed(
                    2
                  ) || 0
                }} -->
                  {{
                    returnFloat(
                      serveExpensearr.todayReceived.twentyAndOneHundredWY.amount
                    )
                  }}
                </span>
                <span v-if="index == 1">
                  <!-- {{
                    serveExpensearr.month.twentyAndOneHundredWY.amount.toFixed(
                      2
                    ) || 0
                  }} -->
                  {{
                    returnFloat(
                      serveExpensearr.month.twentyAndOneHundredWY.amount
                    )
                  }}
                </span>
                <span v-if="index == 2">
                  <!-- {{
                    serveExpensearr.year.twentyAndOneHundredWY.amount.toFixed(
                      2
                    ) || 0
                  }} -->
                  {{
                    returnFloat(
                      serveExpensearr.year.twentyAndOneHundredWY.amount
                    )
                  }}
                </span>
                <span v-if="index == 3">
                  <!-- {{
                    serveExpensearr.total.twentyAndOneHundredWY.amount.toFixed(
                      2
                    ) || 0
                  }} -->
                  {{
                    returnFloat(
                      serveExpensearr.total.twentyAndOneHundredWY.amount
                    )
                  }}
                </span>
              </th>

              <th class="hyjjtabletext">
                <span v-if="index == 0">{{
                  serveExpensearr.todayReceived.oneAndFiveHundredWY.num || 0
                }}</span>
                <span v-if="index == 1">
                  {{ serveExpensearr.month.oneAndFiveHundredWY.num || 0 }}</span
                >
                <span v-if="index == 2">
                  {{ serveExpensearr.year.oneAndFiveHundredWY.num || 0 }}</span
                >
                <span v-if="index == 3">
                  {{ serveExpensearr.total.oneAndFiveHundredWY.num || 0 }}</span
                >
              </th>
              <th>
                <span v-if="index == 0">
                  <!-- {{
                  serveExpensearr.todayReceived.oneAndFiveHundredWY.amount.toFixed(
                    2
                  ) || 0
                }} -->
                  {{
                    returnFloat(
                      serveExpensearr.todayReceived.oneAndFiveHundredWY.amount
                    )
                  }}
                </span>
                <span v-if="index == 1">
                  <!-- {{
                    serveExpensearr.month.oneAndFiveHundredWY.amount.toFixed(
                      2
                    ) || 0
                  }} -->
                  {{
                    returnFloat(
                      serveExpensearr.month.oneAndFiveHundredWY.amount
                    )
                  }}
                </span>
                <span v-if="index == 2">
                  <!-- {{
                    serveExpensearr.year.oneAndFiveHundredWY.amount.toFixed(
                      2
                    ) || 0
                  }} -->
                  {{
                    returnFloat(serveExpensearr.year.oneAndFiveHundredWY.amount)
                  }}
                </span>
                <span v-if="index == 3">
                  <!-- {{
                    serveExpensearr.total.oneAndFiveHundredWY.amount.toFixed(
                      2
                    ) || 0
                  }} -->
                  {{
                    returnFloat(
                      serveExpensearr.total.oneAndFiveHundredWY.amount
                    )
                  }}
                </span>
              </th>

              <th class="hyjjtabletext">
                <span v-if="index == 0">{{
                  serveExpensearr.todayReceived.fiveHundredWY.num || 0
                }}</span>
                <span v-if="index == 1">
                  {{ serveExpensearr.month.fiveHundredWY.num || 0 }}</span
                >
                <span v-if="index == 2">
                  {{ serveExpensearr.year.fiveHundredWY.num || 0 }}</span
                >
                <span v-if="index == 3">
                  {{ serveExpensearr.total.fiveHundredWY.num || 0 }}</span
                >
              </th>
              <th>
                <span v-if="index == 0">
                  <!-- {{
                  serveExpensearr.todayReceived.fiveHundredWY.amount.toFixed(
                    2
                  ) || 0
                }} -->
                  {{
                    returnFloat(
                      serveExpensearr.todayReceived.fiveHundredWY.amount
                    )
                  }}
                </span>
                <span v-if="index == 1">
                  <!-- {{
                  serveExpensearr.month.fiveHundredWY.amount.toFixed(2) || 0
                }} -->
                  {{ returnFloat(serveExpensearr.month.fiveHundredWY.amount) }}
                </span>
                <span v-if="index == 2">
                  <!-- {{
                  serveExpensearr.year.fiveHundredWY.amount.toFixed(2) || 0
                }} -->
                  {{ returnFloat(serveExpensearr.year.fiveHundredWY.amount) }}
                </span>
                <span v-if="index == 3">
                  <!-- {{
                  serveExpensearr.total.fiveHundredWY.amount.toFixed(2) || 0
                }} -->
                  {{ returnFloat(serveExpensearr.total.fiveHundredWY.amount) }}
                </span>
              </th>

              <th class="hyjjtabletext">
                <span v-if="index == 0">{{
                  serveExpensearr.todayReceived.total.num || 0
                }}</span>
                <span v-if="index == 1">{{
                  serveExpensearr.month.total.num || 0
                }}</span>
                <span v-if="index == 2">{{
                  serveExpensearr.year.total.num || 0
                }}</span>
                <span v-if="index == 3">{{
                  serveExpensearr.total.total.num || 0
                }}</span>
              </th>
              <th>
                <span v-if="index == 0">
                  <!-- {{
                  serveExpensearr.todayReceived.total.amount.toFixed(2) || 0
                }} -->
                  {{ returnFloat(serveExpensearr.todayReceived.total.amount) }}
                </span>
                <span v-if="index == 1">
                  <!-- {{
                  serveExpensearr.month.total.amount.toFixed(2) || 0
                }} -->
                  {{ returnFloat(serveExpensearr.month.total.amount) }}
                </span>
                <span v-if="index == 2">
                  <!-- {{
                  serveExpensearr.year.total.amount.toFixed(2) || 0
                }} -->
                  {{ returnFloat(serveExpensearr.year.total.amount) }}
                </span>
                <span v-if="index == 3">
                  <!-- {{
                  serveExpensearr.total.total.amount.toFixed(2) || 0
                }} -->
                  {{ returnFloat(serveExpensearr.total.total.amount) }}
                </span>
              </th>
            </tr>
          </table>
        </div>
        <div>
          <table
            v-if="vipExpensearr"
            id="vippersonserve"
            style="
              border-collapse: collapse;
              width: 99%;
              height: 100%;
              margin-left: 1%;
            "
          >
            <thead style="height: 70px">
              <tr class="vipareaservefirst">
                <th rowspan="2">会员费</th>
                <th rowspan="2">家数</th>
                <th rowspan="2">
                  金额<span style="font-size: 12px">(万元)</span>
                </th>
                <th colspan="1" class="tablelastth"></th>
              </tr>
              <tr class="vippersonservesecond">
                <th class="tablelastth"></th>
              </tr>
            </thead>
            <tr
              class="normaltr"
              v-for="(item, index) in severtabledata"
              :key="index"
            >
              <th v-if="index == 0" style="color: black">本日</th>
              <th v-if="index == 1" style="color: black">月度</th>
              <th v-if="index == 2" style="color: black">年度</th>
              <th v-if="index == 3" style="color: black">累计</th>
              <th class="hyjjtabletext">
                <span v-if="index == 0">{{
                  vipExpensearr.todayReceived.num
                }}</span>
                <span v-if="index == 1">{{ vipExpensearr.month.num }}</span>
                <span v-if="index == 2">{{ vipExpensearr.year.num }}</span>
                <span v-if="index == 3">{{ vipExpensearr.total.num }}</span>
              </th>
              <th>
                <span v-if="index == 0">
                  <!-- {{
                  (vipExpensearr.todayReceived.amount / 1).toFixed(2)
                }} -->
                  {{ returnFloat(vipExpensearr.todayReceived.amount) }}
                </span>
                <span v-if="index == 1">
                  <!-- {{
                  (vipExpensearr.month.amount / 1).toFixed(2)
                }} -->
                  {{ returnFloat(vipExpensearr.month.amount) }}
                </span>
                <span v-if="index == 2">
                  <!-- {{
                  (vipExpensearr.year.amount / 1).toFixed(2)
                }} -->
                  {{ returnFloat(vipExpensearr.year.amount) }}
                </span>
                <span v-if="index == 3">
                  <!-- {{
                  (vipExpensearr.total.amount / 1).toFixed(2)
                }} -->
                  {{ returnFloat(vipExpensearr.total.amount) }}
                </span>
              </th>
            </tr>
          </table>
        </div>
      </div>
      <hr />
      <div style="height: 33%; margin-top: 1%; position: relative">
        <!-- <div style="position: absolute; right: 0; top: 10%; z-index: 9">
          <div
            style="display: flex; align-items: center; margin-bottom: 0.3rem"
          >
            <div
              style="
                width: 0.8rem;
                height: 0.8rem;
                margin-right: 0.2rem;
                background-color: #192c54;
                border-radius: 0.1rem;
              "
            ></div>
            <p style="font-size: 0.8rem; color: black">总金额</p>
          </div>
          <div
            style="display: flex; align-items: center; margin-bottom: 0.3rem"
          >
            <div
              style="
                width: 0.8rem;
                height: 0.8rem;
                margin-right: 0.2rem;
                background-color: #0da9df;
                border-radius: 0.1rem;
              "
            ></div>
            <p style="font-size: 0.8rem; color: black">会员费</p>
          </div>
          <div style="display: flex; align-items: center">
            <div
              style="
                width: 0.8rem;
                height: 0.8rem;
                margin-right: 0.2rem;
                background-color: #fec103;
                border-radius: 0.1rem;
              "
            ></div>
            <p style="font-size: 0.8rem; color: black">服务费</p>
          </div>
        </div> -->

        <div style="display: flex; align-items: center; position: relative">
          <div class="style9">
            <dataPicker
              v-model="hyjjdatepickerndfyzh"
              type="year"
              value-format="yyyy"
              placeholder="请选择"
              :editable="false"
              :rotateable="true"
              prefix-icon="el-icon-caret-bottom"
            />
          </div>
          <p style="position: absolute; left: 5rem">年度费用汇总</p>
          <div
            style="
              width: 2.5rem;
              position: absolute;
              left: 1.9rem;
              bottom: 0;
              border: 1px solid;
            "
          ></div>
        </div>
        <div
          id="vipareabottomechartsdiv"
          :style="{
            height: echartsshow ? 'calc(100% - 3rem)' : 'calc(100% - 1rem)',
          }"
        >
          <Echart
             ref="echartad"
            id="vipareabottomecharts"
            :options="hyjjvipndfyhzoptions"
            height="100%"
            width="100%"
          ></Echart>
        </div>
      </div>
    </div>
    <div
      v-else
      class="samlldiv"
      style="display: flex; align-items: center; justify-content: space-around"
    >
      <dv-loading>Loading...</dv-loading>
    </div>
  </div>
</template>

<script>
import APIS from "@/api/index";
import { Message } from "element-ui";
import Echart from "@/common/echart";
import * as echarts from "echarts";
import { yearDate } from "@/utils/common";
import YYDatePick from "@/components/YYDatePicker";
import dataPicker from "@/components/datePicker/index.js";
export default {
  components: {
    Echart,
    YYDatePick,
    dataPicker,
  },
  data() {
    return {
      loading: false,
      selectvalue: "全部",
      fwftjtoptenoptions: [],
      qianwupaihang: [
        { suppliername: 1, payprice: 1000000000 },
        { suppliername: 1, payprice: 1000000000 },
        { suppliername: 1, payprice: 1000000000 },
        { suppliername: 1, payprice: 1000000000 },
        { suppliername: 1, payprice: 1000000000 },
      ],
      houwupaihang: [
        { suppliername: 1, payprice: 1000000000 },
        { suppliername: 1, payprice: 1000000000 },
        { suppliername: 1, payprice: 1000000000 },
        { suppliername: 1, payprice: 1000000000 },
        { suppliername: 1, payprice: 1000000000 },
      ],
      myzbjedatepicker: "",
      hyjjglxgysfwftjoptions: {},
      radiovalue: 1,
      active: true,
      activenum: 0,
      ccrsboptions: {},
      hyjjList: "",
      radioV: "1",
      yearhyjjoption: {},
      severtabledata: [1, 1, 1, 1],
      hyjjvipndfyhzoptions: {},
      hyjjfwftjoptions: {},
      vipmesnumber: {
        todayReceived: 0,
        totalReceived: 0,
        vipTotal: 0,
        dueSoon: 0,
        yearVip: 0,
      },
      unitleiji: "",
      serveExpensearr: {},
      vipExpensearr: {},
      hyjjdatepickerndfyzh: yearDate(),
      echartsshow: true,
    };
  },
  created() {
    this.getvipExpense();
    this.getserveExpense();
  },
  watch: {
    hyjjdatepickerndfyzh(newVal, oldVal) {
      this.hyjjdatepickerchange();
      // @change="hyjjdatepickerchange"
    },
  },
  mounted() {
    if (window.devicePixelRatio > 1.5) {
      this.echartsshow = true;
    } else {
      this.echartsshow = false;
    }
    this.getnumbervip();
    this.renderselect();
    this.getyearExpenseCollect(1);
  },
  methods: {
    returnFloat(num) {
      num = (parseInt(num * 100) / 100).toFixed(2);
      // num = num.toString(); // 转成字符串类型  如能确定类型 这步可省去
      // if (num.indexOf(".") !== -1) {
      //   let [integerPart, decimalPart] = num.split(".");

      //   if (decimalPart.length > 2) {
      //     decimalPart = decimalPart.substring(0, 2);
      //   } else if (decimalPart.length === 1) {
      //     decimalPart += "0";
      //   }

      //   num = `${integerPart}.${decimalPart}`;
      // } else {
      //   num += ".00";
      // }

      return num;
    },
    hyjjdatepickerchange() {
      this.getyearExpenseCollect(2);
    },
    getyearExpenseCollect(num) {
      let xValue = [];
      let yValue1 = [];
      let yValue2 = [];
      let yValue3 = [];
      APIS.Hyjj.yearExpenseCollect({ year: this.hyjjdatepickerndfyzh })
        .then((res) => {
          for (const key in res.data.serviceExpense) {
            xValue.push(key);
          }
          for (const key6 in res.data) {
            if (key6 == "serviceExpense") {
              for (const key1 in res.data.serviceExpense) {
                // yValue3.push((res.data.serviceExpense[key1] / 10000).toFixed(2));
                yValue3.push(
                  this.returnFloat(res.data.serviceExpense[key1] / 10000)
                );
              }
            } else if (key6 == "totalExpense") {
              for (const key2 in res.data.totalExpense) {
                // yValue1.push((res.data.totalExpense[key2] / 10000).toFixed(2));
                yValue1.push(
                  this.returnFloat(res.data.totalExpense[key2] / 10000)
                );
              }
            } else if (key6 == "vipExpense") {
              for (const key3 in res.data.vipExpense) {
                // yValue2.push((res.data.vipExpense[key3] / 10000).toFixed(2));
                yValue2.push(
                  this.returnFloat(res.data.vipExpense[key3] / 10000)
                );
              }
            }
          }

          if (num == 2) {
            //重新渲染
            let myChart = echarts.init(
              document.getElementById("vipareabottomecharts")
            );
            myChart.setOption({
              xAxis: [
                {
                  data: xValue,
                },
              ],
              series: [
                {
                  data: yValue1,
                },
                {
                  data: yValue2,
                },
                {
                  data: yValue3,
                },
              ],
            });
          } else {
            this.renderhyjjvipndfyhzoptions(xValue, yValue1, yValue2, yValue3);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getserveExpense() {
      APIS.Hyjj.serveExpense()
        .then((res) => {
          this.serveExpensearr = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getvipExpense() {
      APIS.Hyjj.vipExpense()
        .then((res) => {
          this.vipExpensearr = res.data;
          this.loading = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getnumbervip() {
      APIS.Hyjj.todayReceivedAmount()
        .then((res) => {
          this.vipmesnumber.todayReceived = this.returnFloat(res.data / 10000);
        })
        .catch((err) => {
          console.log(err);
        });

      APIS.Hyjj.totalReceivedAmount()
        .then((res) => {
          if (res.data > 99999) {
            this.vipmesnumber.totalReceived = this.returnFloat(
              res.data / 100000000
            );
            this.unitleiji = "亿元";
          } else {
            this.vipmesnumber.totalReceived = this.returnFloat(
              res.data / 10000
            );
            this.unitleiji = "万元";
          }
        })
        .catch((err) => {
          console.log(err);
        });

      APIS.Hyjj.vipTotalNum()
        .then((res) => {
          this.vipmesnumber.vipTotal = res.data;
        })
        .catch((err) => {
          console.log(err);
        });

      APIS.Hyjj.dueSoonNum()
        .then((res) => {
          this.vipmesnumber.dueSoon = res.data;
        })
        .catch((err) => {
          console.log(err);
        });

      APIS.Hyjj.yearVipNum()
        .then((res) => {
          this.vipmesnumber.yearVip = res.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleChange(val) {
      console.log(val);
    },
    renderhyjjglxgysfwftjoptions() {
      let dataarr = [
        { name: "11111", value: 22222, zb: 33 },
        { name: "11111", value: 22222, zb: 33 },
        { name: "11111", value: 22222, zb: 33 },
        { name: "11111", value: 22222, zb: 33 },
        { name: "11111", value: 22222, zb: 33 },
      ];

      this.hyjjglxgysfwftjoptions = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            return `${params.marker}  ${params.name}:${params.value}万元  占比:${params.percent}%`;
            // return `${JSON.stringify(params) } `
          },
        },
        // legend: {
        //   orient: 'vertical',
        //   top: '0%',
        //   left: '0%',
        //   icon: 'circle',
        //   itemGap: 10,
        //   itemWidth: 14, // 设置图例图形的宽
        //   itemHeight: 14,
        //   formatter: function (name) {
        //     let target;
        //     let zb1;
        //     for (let i = 0; i < data.length; i++) {
        //       if (data[i].name === name) {
        //         target = data[i].value
        //         zb1 = data[i].zb
        //       }
        //     }
        //     return `${name}:${target}亿元  占比:${zb1}%`
        //   },
        // },
        series: [
          {
            type: "pie",
            radius: ["0%", "54%"],
            center: ["center", "center"],
            hoverAnimation: false,
            z: 999,
            labelLine: {
              normal: {
                show: false,
                length: 5,
                length2: 5,
              },
            },
            data: [
              {
                name: "",
                value: 0,
                itemStyle: {
                  normal: {
                    color: "#edf1f9",
                    // color: 'red'
                  },
                },
                tooltip: {
                  show: false,
                },
              },
            ],
          },
          {
            name: "采购类型分析",
            type: "pie",
            radius: ["45%", "75%"],
            center: ["center", "center"],
            // roseType: 'area',
            itemStyle: {
              normal: {
                color: function (colors) {
                  var colorList = [
                    "#c136fe",
                    "#6236fe",
                    "#4381f9",
                    "#75a8f2",
                    "#fdb57a",
                    "#41d6b7",
                    "#009245",
                    "#0f69f7",
                    "#c136fe",
                    "#6236fe",
                    "#4381f9",
                    "#75a8f2",
                    "#fdb57a",
                    "#41d6b7",
                    "#009245",
                    "#0f69f7",
                  ];
                  return colorList[colors.dataIndex];
                },
              },
            },
            labelLine: {
              normal: {
                show: true,
                length: 12,
                length2: 35,
                lineStyle: {
                  type: "dashed",
                },
              },
            },
            label: {
              normal: {
                textStyle: {
                  color: "#192C55", // 改变标示文字的颜色
                  align: "right",
                  fontSize: 13,
                },
                formatter: function (params) {
                  let target;
                  let zb1;
                  for (let i = 0; i < dataarr.length; i++) {
                    if (dataarr[i].name === params.name) {
                      target = dataarr[i].value;
                      zb1 = dataarr[i].zb;
                    }
                  }
                  return `${params.name} \n 占比:${zb1}%`;
                },
              },
            },
            data: dataarr,
            startAngle: 20, //起始角度
          },
        ],
      };
    },
    renderhyjjfwftjoptions() {
      let xdata, arr1;
      xdata = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      this.hyjjfwftjoptions = {
        grid: {
          top: "10%",
          left: "1%",
          right: "1%",
          bottom: "1%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          confine: true,
          formatter(params) {
            for (let x in params) {
              return (
                params[x].marker +
                params[x].name +
                ":          " +
                params[x].data +
                "万元"
              );
            }
          },
        },
        xAxis: {
          type: "category",
          data: xdata,
          axisTick: {
            alignWithLabel: true,
          },
          axisLine: {
            lineStyle: {
              color: "#cfddf7",
              width: 1, //x轴线的宽度
            },
          },
          axisLabel: {
            show: true,
            // interval: 0,
            // rotate: -30,
            // margin: 30,
            formatter: function (params) {
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 5; // 一行显示几个字 然后就超过字数就会自动换行
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = "";
                  var start = p * provideNumber;
                  var end = start + provideNumber;
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber);
                  } else {
                    tempStr = params.substring(start, end) + "\n";
                  }
                  newParamsName += tempStr;
                }
              } else {
                newParamsName = params;
              }
              return newParamsName;
            },
            textStyle: {
              // fontSize: 8,
              align: "center",
              color: "#333333",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            nameGap: 30, // 表现为上下位置
            nameTextStyle: {
              padding: [0, 0, 0, -30],
              color: "#000",
              fontFamily: "Alibaba PuHuiTi",
              fontSize: 14,
              fontWeight: 600,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#eeeeee",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
          {
            type: "value",
            nameTextStyle: {
              color: "#393939",
              padding: [0, 0, 0, 40], // 四个数字分别为上右下左与原位置距离
            },
            nameGap: 30, // 表现为上下位置
            position: "right",
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              textStyle: {
                color: "#393939",
              },
            },
          },
        ],
        series: [
          {
            name: "服务费统计",
            type: "bar",
            barWidth: 12,
            itemStyle: {
              normal: {
                color: "#0f69f7",
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    color: "black",
                    fontSize: 12,
                  },
                },
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                // 下面是设置阴影宽度的属性
                shadowStyle: {
                  width: 5,
                },
              },
            },
            data: arr1,
          },
        ],
      };
    },
    renderhyjjvipndfyhzoptions(xValue, yValue1, yValue2, yValue3) {
      let gridstylee = {};
      if (window.devicePixelRatio == 1) {
        gridstylee = {
          left: "3%",
          right: "3%",
          bottom: "4%",
          top: "15%",
          containLabel: true,
        };
      } else if (window.devicePixelRatio == 1.25) {
        gridstylee = {
          left: "3%",
          right: "3%",
          bottom: "5%",
          top: "15%",
          containLabel: true,
        };
      } else {
        gridstylee = {
          left: "3%",
          right: "3%",
          bottom: "7%",
          top: "15%",
          containLabel: true,
        };
      }
      this.hyjjvipndfyhzoptions = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            let html = params[0].name + "<br>";
            for (let i = 0; i < params.length; i++) {
              if (params[i].value) {
                html +=
                  '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' +
                  params[i].color +
                  ';"></span>';
                html +=
                  params[i].seriesName +
                  ":" +
                  params[i].value +
                  "万元" +
                  "<br>";
              }
            }
            return html;
          },
        },
        grid: gridstylee,
        legend: {
          orient: "vertical",
          top: "0%",
          right: "0%",
          itemGap: 10,
          itemWidth: 14, // 设置图例图形的宽
          itemHeight: 14,
        },

        xAxis: [
          {
            type: "category",
            data: xValue,
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "总金额",
            type: "bar",
            barGap: "-20%",
            barWidth: "10%",
            itemStyle: {
              normal: {
                color: "#192c54",
              },
            },
            data: yValue1,
          },
          {
            name: "会员费",
            type: "bar",
            barWidth: "10%",
            itemStyle: {
              normal: {
                color: "#0da9df",
              },
            },
            data: yValue2,
          },
          {
            name: "服务费",
            type: "bar",
            barWidth: "10%",
            itemStyle: {
              normal: {
                color: "#fec103",
              },
            },
            data: yValue3,
          },
        ],
      };
      const tast = this
      window.addEventListener("resize", function () {
        tast.$refs.echartad.resize()
      });
    },
    renderselect() {
      this.fwftjtoptenoptions = this.$store.state.unitlistwqxarr.filter(
        (item) =>
          item.title != "外部客户" && item.title != "杭州金顺建设有限公司"
      );
    },
  },
};
</script>

<style scoped lang="scss">
.Hyjjtop {
  width: 100%;
  height: 100%;
  width: 98%;
  box-sizing: border-box;
  margin: 0 auto;
  height: 100%;
  position: relative;
  scroll-behavior: smooth;
  overflow: hidden;
  font-size: 1rem;

  .samlldiv {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    .viptopleft {
      height: 80%;
      background-color: #182c56;
      width: 44%;
      border-radius: 5rem;
      position: absolute;
      top: 15%;
      left: 0;
      z-index: 2;
      box-shadow: 2px 0px 10px 0px rgba(0, 0, 0, 0.5);
      display: flex;
      align-items: center;
      justify-content: space-around;
      .vipgridhrright {
        height: 1px;
        background: #182c56;
      }
      .vipgridhr {
        height: 1px;
        background: #dfe7f4;
      }
    }

    .viptopleft > div {
      text-align: center;
      color: #dfe7f4;
      margin-top: 1%;
    }

    .viptopright {
      height: 80%;
      border: 1px solid;
      background-color: #dfe7f4;
      width: 66%;
      border-radius: 80px;
      position: absolute;
      top: 15%;
      right: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding-left: 10%;
      box-sizing: border-box;
    }

    .viptopright > div {
      text-align: center;
      color: #182c56;
      margin-top: 1%;
    }
    .vipmiddlearea {
      display: grid;
      grid-template-columns: 78% 22%;
      height: 35%;
    }

    .vipareaservefirst {
      border-top: 0.1rem solid;
      background-color: #dfe7f4;
    }

    .vipareaservesecond {
      border-bottom: 0.1rem solid;
      border-top: 1px solid;
      background-color: #dfe7f4;
    }

    .vippersonservesecond {
      border-bottom: 0.1rem solid;
      background-color: #dfe7f4;
    }

    .normaltr {
      border-bottom: 0.05rem solid black;
      color: #0000ff;
    }
    .hyjjtabletext {
      background-color: #dfe7f4;
      color: #0000ff;
    }
    .hyjjtabletextcolor {
      color: #0000ff;
    }
  }
  .hyjjdowmdiv1 {
    width: 101%;
    margin: 0 auto;
    height: 47%;
    position: relative;
    box-sizing: border-box;
    background-image: url("../assets/hyjjtopbg.png");
    background-size: 101% 100%;
    background-repeat: no-repeat;
    /* border: 1px solid #b8c0d0;
    box-shadow: rgba(169, 183, 201,.3) -1px 1px 4px 5px;   */
    padding: 2%;
    margin-left: -1%;
  }
  .fuftjtopten {
    height: 84%;
    width: 100%;
    position: relative;
  }
  .fuftjtoptendw {
    position: absolute;
    bottom: 10%;
    left: 2%;
    font-size: 14px;
  }
  .glxgysfwftj {
    height: 49%;
    display: flex;
    justify-content: space-between;
    .glxgysfwftjtitle {
      width: 37%;
      height: 100%;
      padding: 1%;
      box-sizing: border-box;
      .glxgysfwftjcontenttext {
        flex: 1;
        position: relative;
        width: 100%;
        height: 90%;
        .glxgysfwftjcontenttextsmalldiv {
          width: 25%;
          height: 26%;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 99;
          display: flex;
          align-items: center;
        }
      }
    }
  }

  .fwfyphtopten {
    width: 60%;
    height: 100%;
    padding: 1%;
    box-sizing: border-box;
    .fwfyphtoptencontent {
      display: flex;
      height: 90%;
      justify-content: space-between;
      .fwfyphtoptencontenttable {
        width: 48%;
        height: 100%;
        padding-top: 3%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        .table1 {
          border-collapse: collapse;
          height: 100%;
          text-align: center;
          width: 100%;
          border-bottom: 2px solid #182c56;
          #qianwupaiming {
            color: #182c56;
            text-align: left;
            tr {
              border-bottom: 1px solid rgba(24, 44, 86, 0.3);
              .bottomyincangtitle {
                background-color: #e4eef9;
                width: 60%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-left: 2%;
              }
            }
          }
          #houwupaiming {
            color: #182c56;
            text-align: left;
            tr {
              border-bottom: 1px solid rgba(24, 44, 86, 0.3);
              .bottomyincangtitle {
                background-color: #e4eef9;
                width: 60%;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding-left: 2%;
              }
            }
          }
        }
      }
    }
  }
}

::v-deep .style9 {
  width: 5rem;
  .el-date-editor.el-input,
  .el-date-editor.el-input__inner {
    width: 5rem;
  }
  .el-input--suffix .el-input__inner {
    padding-right: 0;
  }
  .el-input__inner {
    border: none;
    background-color: transparent;
    text-align: center;
  }
  .el-input__icon {
    color: #182c56;
  }
  .el-input__suffix {
    display: none;
  }
}
</style>
